{% include "data/template-ui.html" %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/icons.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/fonts.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/sweetalert.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/switchery.min.css' %}" />

<style>
    .container-fluid {
        padding: 0 10 0;
    }

    .page-wrapper {
        padding-bottom: 20px;
    }

    .page-wrapper {
        min-height: 600px !important;
    }

    .table {
        font-size: 14px;
    }
    
    h6 {
        color: rgb(0,128,82);
    }

    .btn {
        margin-top: -3px;
        margin-left: 1px;
        background-color: #4680ff;
        color: aliceblue;
    }
    .btn:hover, .btn:focus {
        color:aliceblue;
    }
</style>

<div class="page-wrapper">
    <!-- 正文 -->
    <div class="container-fluid animated fadeInUp">
        <div class="col-10">
            <div class="card">
                <div class="card-title">
                    <h4 class="text-primary">定时执行</h4>
                    <!-- <h5 class="card-subtitle">注：需要对全7家公司完成检核才会在仪表盘、检核报告中显示新的季度数据</h5> -->
                </div>

                <div class="card-content">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>启用</td>
                                <td>
                                    {% if status == 'True' %}
                                    <input type="checkbox" class="checkbox-switch" checked/>
                                    {% else %}
                                    <input type="checkbox" class="checkbox-switch"/>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td>任务名称:</td><td>{{ job_name }}</td>
                            </tr>
                            <tr>
                                <td>任务内容:</td><td>{{ job_command }}</td>
                            </tr>
                            <tr>
                                <td>调度时间:</td>
                                <td>
                                    <input id="job_time" type="text" value="{{ job_time }}" />
                                    <button class="btn" onclick="update_crontab();">提交修改</button>
                                    <hr></hr>
                                    <h6 style="font-weight:550;">说明：</h6>
                                    <h6>此处的“调度时间”为Linux crontab的调度设置，* * * * * 五位星号从左到右分别为：分、时、日、月、周</h6>
                                    <h6>更多用法请参考：https://www.cnblogs.com/huchong/p/9323502.html</h6>
                                </td>
                            </tr>
                            <tr>
                                <td>上次运行时间:</td><td>{{ last_run }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="navbar-fixed-bottom" style="line-height: 10px;font-size:13px;">
    <div class="footer">
        © 2019 Hyhyhyhyhyhyh
    </div>
</footer>

<!-- Jquery -->
<script src="{% static 'js/lib/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{% static 'js/lib/bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'js/lib/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{% static 'js/jquery.slimscroll.js' %}"></script>
<!--Menu sidebar -->
<script src="{% static 'js/sidebarmenu.js' %}"></script>
<!--stickey kit -->
<script src="{% static 'js/lib/sticky-kit-master/dist/sticky-kit.min.js' %}"></script>
<script src="{% static 'js/custom.min.js' %}"></script>
<script src="{% static 'js/sweetalert.min.js' %}"></script>
<script src="{% static 'js/switchery.min.js' %}"></script>

<script>
    var el = document.querySelector('.checkbox-switch');
    var mySwitch = new Switchery(el);

    el.onchange = function() {
        $.ajax({
            url: 'enable_crontab',
            type: 'POST',
            data:{
                status: el.checked
            },
            success: function (data) {
                if (data.msg == '操作成功') {
                    return true
                }
                else {
                    swal('发生错误!', 'error');
                }
            },
            error: function (e) {
                swal('发生错误!', 'error');
            }
        })
    };

    function update_crontab() {
        var job_time = document.getElementById("job_time").value;
        $.ajax({
            url: 'update_crontab',
            type: 'POST',
            data:{
                job_time: job_time
            },
            success: function (data) {
                if (data.msg == '操作成功') {
                    swal({
                        title: '操作成功!',
                        icon: 'success',
                        timer: 1000,
                    });
                }
                else {
                    swal({
                        title: '发生错误!',
                        text: data.reason,
                        icon: 'error'
                    });
                }
            },
            error: function (e) {
                swal({
                    title: '发生错误!',
                    icon: 'error'
                });
            }
        })
    }
</script>

</body>

</html>